<template>
  <el-form
    ref="formRef"
    class="k-form"
    v-bind="$attrs"
    :model="model"
    :rules="rules"
    :label-width="labelWidth"
    :inline="inline"
    @submit.prevent="onSubmit"
  >
    <slot></slot>
  </el-form>
</template>

<script setup lang="ts">
import { ref } from 'vue';
defineOptions({
  name: 'KForm',
  inheritAttrs: false
});

interface Props {
  model?: any;
  rules?: any;
  labelWidth?: string;
  inline?: boolean;
}
const props = withDefaults(defineProps<Props>(), {
  model: () => ({}),
  rules: () => ({}),
  labelWidth: '72px',
  inline: false
});

const formRef = ref();
const onSubmit = async () => {
  await formRef.value.validate();
  return props.model;
};
const validate = async() => await formRef.value.validate();
const resetFields = () => formRef.value.resetFields();
const reset = resetFields;
const clearValidate = () => formRef.value.validate();
const validateField = async (field: string) => await formRef.value.validateField(field);
defineExpose({
  formRef,
  validate,
  reset,
  resetFields,
  clearValidate,
  validateField
});
</script>
<style lang="scss">
.k-form {
  &.k-form-grid {
    display: grid;
    grid-template-columns: repeat(24, 4.17%);

    .el-form-item {
      align-items: center;
    }
  }

  .k-form-item__24 {
    grid-column-end: span 24;
  }

  .k-form-item__22 {
    grid-column-end: span 22;
  }

  .k-form-item__20 {
    grid-column-end: span 20;
  }

  .k-form-item__18 {
    grid-column-end: span 18;
  }

  .k-form-item__16 {
    grid-column-end: span 16;
  }

  .k-form-item__14 {
    grid-column-end: span 14;
  }

  .k-form-item__12 {
    grid-column-end: span 12;
  }

  .k-form-item__10 {
    grid-column-end: span 10;
  }

  .k-form-item__8 {
    grid-column-end: span 8;
  }

  .k-form-item__6 {
    grid-column-end: span 6;
  }

  .k-form-item__4 {
    grid-column-end: span 4;
  }

  .k-form-item__2 {
    grid-column-end: span 2;
  }
}
</style>
